<template>
    <div class="login">
        <h3>登录</h3>
        <div class="login_box">
            <van-form>
              <van-cell-group inset>
                <van-field
                  v-model="user_acc"
                  name="用户账号"
                  label="用户账号"
                  placeholder="用户账号"
                  :rules="[{ required: true, message: '请填写用户账号' }]"
                />
                <van-field
                  v-model="user_pwd"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
                />
              </van-cell-group>
              <div class="login_tips">
                <router-link to="/register">注册</router-link>
                <span @click="clearFn">重置</span>
              </div>
              <div style="margin: 16px;">
                <van-button round block type="primary" @click="loginFn">
                  提交
                </van-button>
              </div>
            </van-form>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref,reactive } from 'vue'
    import { userLogin } from '../api/index'
    import { showDialog } from 'vant';
    import { useRouter } from 'vue-router'
    const $router = useRouter();
    let user_acc = ref("");
    let user_pwd = ref("");
    
    //登录
    const loginFn = async()=>{
        // const that = this;
        await userLogin({user_acc:user_acc.value,user_pwd:user_pwd.value}).then(
            (content:any)=>{
                // console.log(content)
                let {user_nick_name, code,token} = content;
                // console.log(result,code)
                if(code == 200) {
                    localStorage.setItem("TOKEN",token);
                    localStorage.setItem("USER_NAME",user_nick_name);
                    // 登录成功
                    showDialog({
                      title: '登录成功',
                      message: `欢迎回来，${user_nick_name}`,
                    }).then(() => {
                      // 延迟跳转首页
                        setTimeout(() => {
                            $router.replace({path: '/index'})
                        }, 150);
                    });
                }
                else{
                    showDialog({
                      title: '登录失败',
                      message: '账号或密码错误',
                    }).then(() => {
                      // 延迟跳转首页
                    });
                }
            }
        )
    }

    //重置
    const clearFn = ()=>{
        user_acc.value = '';
        user_pwd.value = '';
    }
</script>

<style lang="less" scoped>
    .login{
        h3{
            margin-top: 120px;
            text-align: center;
        }
        .login_box{
            margin-top: 20px;
            input{
                margin-bottom: 20px;
            }
            .login_tips{
                margin-top: 10px;
                display: flex;
                font-size: 14px;
                color: red;
                a{
                    color: red;
                    text-decoration: underline;
                }
                span{
                    text-decoration: underline;
                }
                justify-content: space-around;
            }
        }
    }
</style>